Estoy tratando de dibujar un lienzo con dos bloques, que voy a convertir en dos jugadores/personajes. Sin embargo, después de las primeras líneas de código, si le agrego algo más, ya no se carga nada. Estoy empezando a aprender JavaScript, así que no tengo ni idea de por qué no funciona.
var canvas = document.getElementById('canvas'); var c = canvas.getContext("2d"); canvas.width = 1000 canvas.height = 500 c.fillRect(50, 50, canvas.width, canvas.height) // If i try add the code below then everything disappears. /* class Sprite { constructor(position) { this.position = position } draw() { c.fillStyle='red' c.fillRect(this.position.x, this.position.y, 50, 150) } } const player = new Sprite( { x: 0, y: 0 } ) player.draw() const enemy = new Sprite( { x: 400, y: 100 } ) enemy.draw() console.log(player) */ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>STREET FIGHTER</title> </head> <body> <canvas id="canvas"></canvas> <script src="index.js"></script> </body> </html>funciona bien para mi...
No veo nada que cause el comportamiento que describes.
Vea el código a continuación, eliminé el comentario en su clase:
var canvas = document.getElementById('canvas'); var c = canvas.getContext("2d"); canvas.width = canvas.height = 140 c.fillRect(50, 30, canvas.width, canvas.height) class Sprite { constructor(rect, color) { this.rect = rect this.color = color } draw() { c.fillStyle = this.color c.fillRect(this.rect.x, this.rect.y, this.rect.w, this.rect.h) } } const player = new Sprite({ x: 15, y: 10, w:9, h:9 }, "red") player.draw() const enemy = new Sprite({ x: 90, y: 35, w:20, h:10}, "cyan") enemy.draw() console.log(player) <canvas id="canvas"></canvas>Cambio un poco los parámetros en el constructor pero nada que afecte tu código original